<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib tagdir="/WEB-INF/tags" prefix="tag" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@taglib uri="http://www.slim3.org/functions" prefix="f"%>
<%@ page isELIgnored="false"%>
<%
	request.setAttribute("lf", "\n");
%>
<c:forEach var="msg" items="${messageList}">
<div style="font-size:17px; width:50%; border:1px solid; margin-top:10px">
  <div style="background:#ddf;margin:0;padding:0"><span id="sj_${f:h(msg.key)}" style="margin:3px;font-weight:bold">${msg.subject}</span></div>
  <div style="background:#dfd;margin:0;padding:0;border-top:1px #aaa solid">
   <table style="width:100%;margin:0;padding:0">
    <tr>
     <td style="width:40%;padding-left:3px;font-weight:bold">${msg.nick}</td>
     <td style="width:59%;margin-right:1px;text-align:right">
      <fmt:formatDate pattern="yyyy-MM-dd HH:mm:ss" value="${msg.createTime}"/>
      <span style="background:white;font-size:12px;padding:1px;padding-left:2px;padding-right:2px;border:1px solid;cursor:pointer" onclick="replyTo('${f:h(msg.key)}')">回應</span>
     </td>
    </tr>
   </table>
  </div>
  <div style="clear:both;margin:0;padding:0;border-top:1px #aaa solid"><span style="margin:3px;">${fn:replace(msg.content, lf, '<br/>')}</span></div>
  <div id="re_${f:h(msg.key)}" style="display:none;margin:0;padding:0;border-top:1px #aaa solid"></div>
</div>
</c:forEach>

<div style="font-size:17px; width:40%">
共 ${fn:length(messageList)} 筆留言
<c:if test="${from>0}"><a href="${ctxPath}/slim3/message/messageBoard?action=list&from=${previous}&count=${count}">上一頁</a></c:if>
<c:if test="${hasNextPage}"><a href="${ctxPath}slim3/message/messageBoard?action=list&from=${from+count}&count=${count}">下一頁</a></c:if>
<input type="button" value="建立新留言" onclick="newPost()"/>
</div>

<div id="newPost" style="display:none;font-size:17px; width:50%; border:1px solid; margin-top:10px">">
</div>
<div id="formTemplate" style="display:none">
 <form id="msgform" action="${ctxPath}/slim3/message/messageBoard" method="post"
 	onsubmit="return jsonSubmit(this)" style="width:100%">
 	<input type="hidden" id="action" name="action" value=""/>
 	<input type="hidden" id="replyTo" name="replyTo" value=""/>
  <table style="width:99%">
   <tr>
 	<td style="width:25%;font-weight:bold;text-align:right">暱稱</td><td style="width:75%"><input style="width:98%" type="text" name="nick"/></td>
   </tr>
   <tr>
 	<td style="font-weight:bold;text-align:right">電子郵件</td><td><input style="width:98%" type="text" name="email"/></td>
   </tr>
   <tr>
 	<td style="font-weight:bold;text-align:right">標題</td><td><input style="width:98%" type="text" id="subject" name="subject"/></td>
   </tr>
   <tr>
 	<td style="font-weight:bold;text-align:right">內容</td><td><textarea style="width:98%; height:16em" name="content"></textarea></td>
   </tr>
   <tr>
 	<td colspan="2" style="text-align:right">
 	 <input type="button" value="放棄" onclick="hideForm()"/>
 	 <input type="reset" value="重寫"/>
 	 <input type="submit" value="送出"/>
 	</td>
   </tr>
  </table>
 </form>
</div>
<div id="divSuccess" style="display:none">
  您已成功送出留言， <a id="aViewMessage" href="#">按此檢視</a>您剛才送出的留言
</div>
<script type="text/javascript">
var msgFormContent;
var curFormContainerId = null;
function newPost() {
	showPostForm('new', 'newPost', '');
}
function replyTo(k) {
	showPostForm('reply', 're_'+k, k);
	var s = E('sj_'+k).innerHTML;
	if (s.indexOf('回覆:')!=0)
		s = '回覆:' + s;
	E('subject').value = s;
}
function showPostForm(act, id, k) {
	if (curFormContainerId!=null) {
		alert('請先送出或放棄目前編輯中的留言 ');
		return;
	}
	curFormContainerId = id;
	E(id).innerHTML = msgFormContent;
	E('replyTo').value = k;
	E('action').value = act;
	S(id).display = '';
}
function ser() {
	var e = E('formTemplate');
	msgFormContent = e.innerHTML;
	e.innerHTML = '';
}
function hideForm() {
	if (curFormContainerId==null) return;
	var e = E(curFormContainerId);
	e.style.display='none';
	e.innerHTML = '';
	curFormContainerId = null;
}
ser();
</script>